<template>
	<view class="address-view">
		<!-- 地址列表区域 -->
		<view class="address-list">
			<view class="address-item" v-for="item in list" :key="item.addressId">
				<view class="content" @click="selectAddress(item.addressId)">
					<view class="name">
						{{ item.userName }} {{ item.userPhone }}
						<van-tag v-if="item.defaultFlag" type="danger" round>默认</van-tag>
					</view>
					<view class="address">{{ item.provinceName }} {{ item.cityName }} {{ item.regionName }} {{ item.detailAddress }}</view>
				</view>
				<van-icon name="edit" class="address-edit" @click="goAddressEdit(item.addressId)" />
			</view>
		</view>

		<!-- 新增地址区域 -->
		<view class="address-bottom"><van-button block round color="#1baeae" @click="goAddressEdit('')">新增地址</van-button></view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { getAddressList } from '../../api/modules/address'
import { reactive, toRefs } from 'vue'
import { ShopStore } from '../../store/shop'
const shopStore = ShopStore()

const state = reactive({ list: [] })

// 加载数据
const init = async () => {
	// 1. 显示加载
	uni.showLoading({ title: '加载中...', mask: true })
	// 2. 发起请求
	const { data } = await getAddressList()
	state.list = data

	uni.hideLoading()
}

// 跳转地址编辑
const goAddressEdit = id => {
	uni.navigateTo({ url: `/subpkg/address-edit/address-edit?id=${id}` })
}

// 选择地址
const selectAddress = id => {
	// 将当前选择id 存储到pinia中
	shopStore.addressId = id
	uni.navigateBack()
}

// 页面加载
onLoad(message => {})

// 页面显示
onShow(() => {
	init()
})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})

const { list } = toRefs(state)
</script>

<style lang="scss">
.address-list {
	box-sizing: border-box;
	height: 100%;
	padding: 24rpx 24rpx 160rpx;
	.address-item:not(:last-child) {
		margin-bottom: 24rpx;
	}
	.address-item {
		padding: 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
		position: relative;
		display: flex;
		box-sizing: border-box;
		width: 100%;
		overflow: hidden;
		color: #232323;
		background-color: #fff;
		font-size: 28rpx;
		line-height: 48rpx;
		.content {
			flex: 1;
			padding-right: 88rpx;
			.name {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;
				font-size: 32rpx;
				line-height: 44rpx;
				.van-tag {
					margin-left: 16rpx;
					padding-top: 0;
					padding-bottom: 0;
					flex: 0;
					line-height: 34rpx !important;
					transform: translateY(-2rpx);
				}
			}
			.address {
				color: #323233;
				font-size: 26rpx;
				line-height: 36rpx;
			}
		}
		.address-edit {
			position: absolute;
			top: 50%;
			right: 32rpx;
			color: #969799;
			font-size: 40rpx;
			transform: translateY(-50%);
			.van-icon {
				padding: 30rpx;
				padding-right: 0;
			}
		}
	}
}

.address-bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
	box-sizing: border-box;
	width: 100%;
	padding: 0 32rpx;
	background-color: #fff;
	.van-button {
		margin: 10rpx 0;
	}
}
</style>
